<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#tinxemnhieu, #tinnoibat { width:250px; border:solid 1px #06C}
#tinxemnhieu a, #tinnoibat a { text-decoration:none; color:#9C0}
#tinnoibat p { margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px; border-bottom:solid 1px #9F6; background-color:#039}
#tinnoibat span,
.caption { background-color:#900; color:#9C6; padding-top:5px; padding-bottom:5px; display:block}
.rows { margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px; border-bottom:solid 1px #9F6; background-color:#039}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
	$("[tieude]").css("color","#003399");
	$("[tieude]").css("font-Size","24px");
	$("[tieude]").css({"margin":"0","padding":"5px","background-Color":"#FFFFCC"});
	$("#tinxemnhieu span").addClass("caption");
	$("#tinxemnhieu p").addClass("rows");
	//$("#tinxemnhieu p").removeClass("rows");
	$("#btnan").click(function() { $("#tinxemnhieu").hide(2000);   });
	$("#btnhien").click(function() { $("#tinxemnhieu").show(3000);   });
	$("#btnanhien").click(function() { $("#tinxemnhieu").toggle(1000);   });
	$("#btnup").click(function() { $("#tinxemnhieu").slideUp(1000);   });
	$("#btndown").click(function() { $("#tinxemnhieu").slideDown(1000);   });
	$("#btnupdown").click(function() { $("#tinxemnhieu").slideToggle(1000);   });
	$("[name='btnhtml']").click(function(){
		$("#tinnoibat span").html("Tin nổi bật");
	});
	$("[name='btnprepend']").click(function(){
		$("#tinnoibat").prepend("<p><a href=#>Cá sấu cắn voi</a></p>");
	});
	$("[name='btnappend']").click(function(){
		$("#tinnoibat").append("<p><a href=#> Bí ẩn về loài cá biết bay </a></p>");
	});
	$("[name='btnbefore']").click(function(){
		$("#tinnoibat").before("<hr/>");
	});
	$("[name='btnafter']").click(function(){
		$("#tinnoibat").after("<hr/>");
	});
});
</script>
</head>

<body>
<p tieude=1>Bài tập Jquery</p>
<div id="tinxemnhieu">
<span>TinXemNhieu</span>
<p><a href="#"> Hang động kỳ vĩ tại Việt Nam </a></p>
<p><a href="#"> Thiên đường của chim tại 'Tam giác quỷ' </a></p>
<p><a href="#"> Bí ẩn về loài cá biết bay </a></p>
<p><a href="#"> Tre có thể giúp làm nguội trái đất  </a></p>
<p><a href="#"> Đất hiếm có ý nghĩa như thế nào với con người </a></p>
<p><a href="#"> Cá sấu cắn voi </a></p>
</div>
<p>
  <input type="button" value="Ẩn" id="btnan" />
  <input type="button" value="Hiện" id="btnhien" />
  <input type="button" value="Ẩn Hiện" id="btnanhien" />
  <input type="button" value="Up" id="btnup" />
  <input type="button" value="Down" id="btndown" />
  <input type="button" value="Up Down" id="btnupdown" />
</p>

<div id="tinnoibat">
<span></span>
<p><a href="#"> Tre có thể giúp làm nguội trái đất  </a></p>
<p><a href="#"> Loài bướm biết tìm thuốc để chữa bệnh </a></p>
<p><a href="#"> Cửa ải tử thần trên dòng sông </a></p>
<p><a href="#"> Đất hiếm có ý nghĩa như thế nào với con người </a></p>
</div>
  <input type="button" value="Before" name="btnbefore" />
  <input type="button" value="After" name="btnafter" />
  <input type="button" value="HTML" name="btnhtml" />
  <input type="button" value="Thêm trước" name="btnprepend" />
  <input type="button" value="Thêm sau" name="btnappend" />
</body>
</html>